<script setup name="App">
  import { RouterView, RouterLink, useRouter, useRoute } from 'vue-router'
  import { ref, provide, computed, onMounted } from 'vue';
  import useDataStore from "@/stores/Data";
  const useData = useDataStore();

  // onMounted(() => {
  //   useData.getDetailData(Number(route.query.corId));
  // })

  // 使用 useRoute 钩子获取路由实例  
  const route = useRoute();

  // 创建一个计算属性来根据路由路径确定是否添加 active 类  
  const isActive = computed(() => {
    return route.path === '/front/task' || route.path === '/front/vote' || route.path === '/front/answer' || route.path === '/front/progress';
  });

  //v-if配置变量
  const showNavItem = ref(false);
  const iflogin = ref(true);
  const loginitem = ref(false);
  const registeritem = ref(false);
  const learnplazaitem = ref(false);
  const mycourseitem = ref(false);
  const aboutitem = ref(false);

  //挂载路由
  const router = useRouter();

  //跳转路由方法
  function tohome() {
    router.push('/home');
  }
  function tofront() {
    router.push('/front/task');
  }
  function tologin() {
    router.push('/login');
  }
  function toregister() {
    router.push('/register');
  }
  function toabout() {
    router.push('/aboutview');
  }
  function tolearnplaza() {
    router.push('/learnplaza');
    learnplazaitem.value = true;
  }
  function tomycourse() {
    router.push('/mycourse');
    mycourseitem.value = true;
  }
  //打开div
  function logindisplay() {
    loginitem.value = true;
    router.push('/login');
  }
  // function registerdisplay() {
  //   registeritem.value = true;
  //   router.push('/register');
  // }

  //关闭div
  function hideNavItem() {
    showNavItem.value = false;
    router.push('/home');
  }
  function hideloginitem() {
    loginitem.value = false;
    router.push('/home');
  }
  function hideregisteritem() {
    registeritem.value = false;
    router.push('/home');
  }
  function hidelearnplazaitem() {
    learnplazaitem.value = false;
    router.push('/home');
  }
  function hidemycourseitem() {
    mycourseitem.value = false;
    router.push('/home');
  }
  function hideaboutitem() {
    aboutitem.value = false;
    router.push('/home');
  }
  function outlogin() {
    iflogin.value = true;

  }

  //分享给子组件
  provide('showNavItem', showNavItem);
  provide('loginitem', loginitem);
  provide('registeritem', registeritem);
  provide('iflogin', iflogin);
  provide('aboutitem', aboutitem);

</script>

<template>
  <div class="app">

    <div class="navigate">
      <div class="nav-head">
        <div class="nav-item" :class="{ active: $route.path === '/home' }">
          <span @click="tohome">首页</span>
        </div>

        <div class="nav-item" :class="{ active: isActive  }" v-if="showNavItem">
          <span @click="tofront">{{ useData.theDetail?.name }}</span>
          <div class="close-btn" @click="hideNavItem">×</div>
        </div>

        <div class="nav-item" :class="{ active: $route.path === '/login' }" v-if="loginitem">
          <span @click="tologin">登录</span>
          <div class="close-btn" @click="hideloginitem">×</div>
        </div>

        <!-- <div class="nav-item" :class="{ active: $route.path === '/register' }" v-if="registeritem">
          <span @click="toregister">注册</span>
          <div class="close-btn" @click="hideregisteritem">×</div>
        </div> -->

        <div class="nav-item" :class="{ active: $route.path === '/learnplaza' }" v-if="learnplazaitem">
          <span @click="tolearnplaza">学习广场</span>
          <div class="close-btn" @click="hidelearnplazaitem">×</div>
        </div>

        <div class="nav-item" :class="{ active: $route.path === '/mycourse' }" v-if="mycourseitem">
          <span @click="tomycourse">我的课程</span>
          <div class="close-btn" @click="hidemycourseitem">×</div>
        </div>

        <div class="nav-item" :class="{ active: $route.path === '/aboutview' }" v-if="aboutitem">
          <span @click="toabout">关于我们</span>
          <div class="close-btn" @click="hideaboutitem">×</div>
        </div>

      </div>
      <div class="nav-tail">
        <!-- <button class="close-btn" @click="router.push('/login')">登录</button>
        <button class="close-btn" @click="router.push('/register')">注册</button> -->
        <div class="nav-tail-first" v-if="iflogin" @click="logindisplay">登录</div>
        <div class="nav-tail-last" v-if="iflogin" @click="logindisplay">注册</div>
        <div class="nav-tail-avatar" v-if="!iflogin">

          <div class="myinformation">

            <div class="myinformation-head">
              <div class="myinformation-head-img">
                <img src="https://www.codelover.club/icons/user/icon14.png" alt="">
              </div>
              <div class="myinformation-head-infoall">
                <div class="myinformation-head-info">22002356 个人中心</div>
                <div class="myinformation-head-vocational">大学生</div>
              </div>
            </div>

            <div class="myinformation-center">
              <div class="myinformation-center-item" @click="tomycourse">
                <img
                  src=""
                  alt=""> 我的课程
              </div>
              <div class="myinformation-center-item" @click="tolearnplaza">
                <img
                  src=""
                  alt=""> 学习广场
              </div>
              <div class="myinformation-center-item">
                <img src="https://www.codelover.club/static/img/questionBank.7bff5c86.png" alt=""> 管理中心
              </div>
            </div>

            <div class="myinformation-class">
              <div class="myinformation-class-item">
                <div class="myinformation-class-item-first">
                  <img
                    src=""
                    alt="">
                  <p>22级网页设计技术V3</p>
                </div>
                <div class="myinformation-class-item-second">继续学习</div>
                <div class="myinformation-class-item-last">×</div>
              </div>
              <div class="myinformation-class-item">
                <div class="myinformation-class-item-first">
                  <img
                    src=""
                    alt="">
                  <p>跨平台APP项目开发</p>
                </div>
                <div class="myinformation-class-item-second">继续学习</div>
                <div class="myinformation-class-item-last">×</div>
              </div>
              <div class="myinformation-class-item">
                <div class="myinformation-class-item-first">
                  <img
                    src=""
                    alt="">
                  <p>考试专用</p>
                </div>
                <div class="myinformation-class-item-second">继续学习</div>
                <div class="myinformation-class-item-last">×</div>
              </div>
              <div class="myinformation-class-item">
                <div class="myinformation-class-item-first">
                  <img
                    src=""
                    alt="">
                  <p>前端框架应用项目开发</p>
                </div>
                <div class="myinformation-class-item-second">继续学习</div>
                <div class="myinformation-class-item-last">×</div>
              </div>
            </div>

            <div class="myinformation-tail" @click="outlogin">退出登录</div>

          </div>
        </div>
      </div>

    </div>

    <div class="main-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<style scoped>
  body {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .navigate {
    display: flex;
    /* justify-content: space-around; */
    /* margin: 0 100px; */
    /* width: 30%; */
    height: 75px;
    padding-left: 30px;
    /* border: 1px red solid; */
    box-shadow: 0px 15px 10px -10px rgba(0, 0, 0, 0.5);
  }

  .nav-head {
    padding-left: 10px;
    /* padding-bottom: 10px; */
    margin: 20px 10px;

    flex: 0 0 90%;
    border-bottom: 1px rgb(217, 220, 228) solid;
    width: 20%;
    display: flex;
    /* flex-direction: row; */
    /* justify-content: space-between; */
    align-items: center;
  }

  .nav-item {

    display: flex;
    height: 78%;
    /* margin: 2px 2.5px 3px; */
    margin-left: 5px;
    /* margin-left: 0px; */
    border: rgb(217, 220, 228) 1px solid;
  }

  .nav-item span {
    margin: 4px 10px;
    font-size: 0.8rem;
    cursor: pointer;
  }

  .nav-item div {
    margin: 5px;
    margin-right: 8px;
    border-radius: 50%;
    cursor: pointer;
    /* background-color: white; */
  }


  .nav-item.active {
    background-color: rgb(101, 183, 135);
    color: white;
  }

  .nav-tail {
    flex-grow: 1;
    display: flex;
    /* border: 1px red solid; */
    align-items: center;
    /* 垂直居中对齐子元素 */
    justify-content: space-between;
    /* 根据需要，可以在子元素之间添加空间 */
  }

  .nav-tail-first {
    font-size: 0.9rem;
    flex: 0 0 50%;
    /* border: 1px red solid; */
    transition: color 0.3s ease;
    cursor: pointer;
  }

  .nav-tail-first:hover {
    color: rgb(122, 183, 249);
  }

  .nav-tail-last {
    font-size: 0.9rem;
    flex: 1;
    transition: color 0.3s ease;
    /* border: 1px red solid; */
    cursor: pointer;
  }

  .nav-tail-last:hover {
    color: rgb(122, 183, 249);
  }

  .close-btn {
    width: 16px;
    height: 16px;
    /* border: 1px red solid; */
    line-height: 16px;
    text-align: center;
    /* margin-top: 10px; */
    transition: background-color 0.3s ease-in-out;
    transition: color 0.1s ease-in-out;

  }

  .close-btn:hover {
    background-color: rgb(182, 188, 202);
    color: white;
  }

  .nav-tail-avatar {
    position: relative;
    margin-left: 30px;
    width: 50px;
    height: 50px;
    /* border: 1px red solid; */
    background-image: url('https://www.codelover.club/icons/user/icon14.png');
    background-size: cover;
    border-radius: 50%;
    cursor: pointer;
  }

  .nav-tail-avatar:hover .myinformation {
    /* opacity: 1; */
    max-height: 445px;
    /* transition: opacity 0.5s; */
    /* display: block; */
  }

  .myinformation {
    z-index: 999;
    position: absolute;
    left: -270px;
    top: 50px;
    width: 350px;
    /* height: 445px; */
    /* height: 600px; */
    background-color: white;
    /* opacity: 0; */
    overflow: hidden;
    /* Hide content that exceeds the max-height */
    max-height: 0;
    transition: max-height 0.01s ease-in-out;
    /* display: none; */
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);
    border-radius: 3%;
    /* border-bottom-left-radius: 3%; */

  }


  .main-content {
    margin: 0 auto;
    /* margin-top: 30px; */
    width: 100%;
    /* height: 200%; */
    /* border: 3px red solid; */
  }







  .myinformation-head {
    /* background-color: bisque; */
    display: flex;
    height: 32%;
  }

  .myinformation-head-img {
    /* margin: 30px; */
    flex: 0 0 140px;

    /* background-color: rgb(219, 153, 9); */
  }

  .myinformation-head-img img {
    /* margin:auto auto; */
    /* border: 1px red solid; */
    width: 100px;
    margin: 20px 20px;
  }

  .myinformation-head-info {
    /* border: 1px red solid; */
    margin-top: 40px;
    font-size: 1.3rem;
  }

  .myinformation-head-vocational {
    /* border: 1px red solid; */
    font-size: 1.2rem;
    width: 33%;
    background-color: rgb(242, 173, 66);
    color: white;
    /* margin-left: 2px; */
    border-radius: 15%;
    /* position: absolute; */
  }

  .myinformation-center {
    /* background-color: rgb(136, 5, 127); */
    display: flex;
    flex-wrap: wrap;
  }

  .myinformation-center-item {
    margin-left: 18%;
    line-height: 45px;
  }

  .myinformation-center-item img {
    width: 22px;
  }

  .myinformation-class {
    background-color: rgb(241, 249, 254);
    margin: auto 20px;
    border-radius: 7%;
    /* display: flex; */
  }

  .myinformation-class-item {
    display: flex;
    align-items: center;
    height: 40px;
    /* justify-content: space-between;  */

  }

  .myinformation-class-item-first {
    display: flex;
    align-items: center;
    margin-left: 15px;
    flex: 0 0 65%;
  }


  .myinformation-class-item-first img {
    width: 16px;
    height: 16px;

  }

  .myinformation-class-item-first p {
    font-weight: bold;
    margin-left: 12px;
    color: rgb(102, 102, 102);
  }

  .myinformation-class-item-second {
    flex: 0 0 25%;
    color: rgb(132, 175, 229);
  }

  .myinformation-class-item-last {
    color: rgb(231, 178, 85);
  }

  .myinformation-tail {
    /* background-color: rgb(190, 181, 10); */
    text-align: center;
    justify-content: center;
    color: rgb(161, 161, 161);
    margin: 10px 40px;
    height: 30px;
    line-height: 30px;

  }
</style>